<template>
   
   <div class="baseicInfoSectionForm">
      
      <div v-show="paramObj.isShow" class="formItem" :class="[{unsaved:unsavedParamIdList.indexOf(findParamKey(paramObj)) !== -1},paramObj.class]" v-bind:style="{width:paramObj.width}" v-for="(paramObj,paramIndex) in localParamList" :key="paramIndex">
            
            <div class="name">
               <span v-show="paramObj.attr2 === '1'" style="color:red;margin-right:4px;">*</span>
               <i v-show="paramObj.type == 'file' || paramObj.type == 'img'" class="iconfont iconfujian"></i>{{paramObj.name}}：
            </div>

            <basic-info-form-value :paramObj="paramObj" 
               @paramValueChange="paramValueChange"
               @deleteAttachment="deleteAttachment"
            ></basic-info-form-value>
      </div>

      <div class="bottomOperation" v-show="isExecuteSave === true && localParamList.length > 0" >
         <el-button size="mini" @click="cancel()">取消</el-button>
         <el-button type="primary" size="mini" @click="save()" :loading="isSaving">保存</el-button>
      </div>

      <div class="bottomOperation" v-show="isExecuteSave === false && localParamList.length > 0" >
         <el-button type="success" round plain size="mini" @click="cancel()">取消</el-button>
         <el-button type="success" round size="mini" @click="save()" :loading="isSaving">确定</el-button>
      </div>


      <!-- 弹框：文件上传提示 -->
      <div ref="fileUploadLoading" class="fileUploadLoading">
         <div class="content">
            <i class="el-icon-loading"></i> 正在上传...
         </div>
      </div>

   </div>
</template>

<script>

import { findParamByKey,makeParamKey,getParamKey,processingAssociatedFields,processingParamValueChange,save } from '../service/personalInfoDataProcessing'

export default {
   props:{
      paramList:{
         type:Array,    // 属性值类型必须是Object；可选的类型有：String、Number、Object、Array等
         required:true, // 此属性值为必填; 使用当前组件时，若未传入此值就会报错
      },
      groupId:{
         type:String,   // 属性值类型必须是Object；可选的类型有：String、Number、Object、Array等
         required:true,
      },
      isExecuteSave:{   // 是否执行保存
         type:Boolean,   
         default:true,
         required:false,
      }
   },
   data(){
      return {
         localParamList:JSON.parse(JSON.stringify(this.paramList)),
         paramValueMap:new Map(),
         // 未保存的参数ID数组
         unsavedParamIdList:[],
         
         isSaving:false,
      }
   },
   mounted(){
      let that = this;
      this.localParamList.forEach((param)=>{
         that.paramValueMap.set(getParamKey(param),param.userSelection.parameterValue);
      });

      // 监听外部模拟触发字段的onchange事件
       window.addEventListener("message", function(event) {
         if (event.source == window && event.data.source && event.data.source == "review-basic-info-form-value-change-event") {
            // that.paramValueChange(event.data.data.value,event.data.data.param);

            let value = event.data.data.value;
            if(value == ""){
               value = "0";
            }
            let paramId = event.data.data.paramId;
            for(let i=0;i<that.localParamList.length;i++){
               if(that.localParamList[i].id === paramId){
                  that.localParamList[i].userSelection.parameterValue = value;
                  that.paramValueChange(event.data.data.value,that.localParamList[i]);
               }
            }
         }
      });
   },
   methods:{
      // 公共 - 获取参数key
      findParamKey(param){
         return getParamKey(param);
      },
      // 监听参数值变化
      paramValueChange(event,param,type1){
         
         // 现专业技术职务
         if("10100-018" == param.id){
            this.findCategoryTypePost(event,true);
         }

         processingParamValueChange(event,param,type1,this.localParamList,this);
      },
      // 删除附件
      deleteAttachment(param){
         var key = getParamKey(param);
         this.unsavedParamIdList.remove(key);
         processingAssociatedFields(param,this.localParamList);
      },
      // 取消编辑
      cancel(){

         if(this.unsavedParamIdList.length > 0){

            this.$confirm('确定要放弃修改吗?', '提示', {
               confirmButtonText: '确定',
               cancelButtonText: '取消',
               type: 'warning'
            }).then(() => {
               this.$emit('cancelEdit');
            }).catch(() => {
            });

         }else{
            this.$emit('cancelEdit');
         }
      },
      // 保存数据
      save(){

         if(this.isExecuteSave === true){ // 执行保存执行
            this.isSaving = true;

            var that = this;
            save([this.localParamList],this.groupId,this,(isSuccess)=>{
               that.isSaving = false;
               if(isSuccess){
                  let groupInfo = {
                     id:that.localParamList[0].groupId,
                     type:that.localParamList[0].isLevel
                  }
                  that.$emit('editFinish',groupInfo);
               }
            });

         }else{ // 直接返回修改后的数据

            this.$emit('editFinish',this.localParamList);
         }
        
      },
      // 获取select的option选项列表 - 通过职称获取岗位名称列表
      findCategoryTypePost(categoryTitle,isClear){ // isClear表示是否清空岗位数据的值
         
         if(categoryTitle.trim() == ""){
               return;
         }
         
         var formData = new FormData;
         formData.append("categoryTitle",categoryTitle);
         this.$api.infoEntryCategoryTypePost(formData).then(res => {
               if(res.code == 200){
                  var paramList = this.localParamList;
                  for(var i=0;i<paramList.length;i++){
                     if("10100-028" == paramList[i].id){ 
                           if(isClear == true){
                              paramList[i].userSelection.parameterValue = "";
                           }
                           paramList[i].options = res.data;
                           
                     }
                  }
               }
         });
      },
   },
   watch:{
      paramList(){
         this.localParamList = JSON.parse(JSON.stringify(this.paramList));
         this.unsavedParamIdList = [];

         var that = this;
         that.paramValueMap.clear();
         this.localParamList.forEach((param)=>{
            that.paramValueMap.set(getParamKey(param),param.userSelection.parameterValue);

            if(param.id === "10100-018"){
               // 请求岗位options列表
               that.findCategoryTypePost(param.userSelection.parameterValue,false);
            }
         });
      },
      
   }

}
</script>

<style scoped>

.baseicInfoSectionForm{
    display: flex;
    flex-direction:row;
    flex-wrap: wrap;
    margin-bottom: 24px;

    padding-bottom: 10px;
    border-bottom: solid #efefef 1px;
    border-bottom: 0px;
    position: relative;
}


>>> .formItem.unsaved input,
>>> .formItem.unsaved textarea,
>>> .formItem.unsaved select{
    border: red solid 1px;
}
>>> .formItem{
    width: 33%;
    display: flex;
    flex-direction: row;
    align-items: center;
    color:#333333;
    font-size:14px;
    margin:6px 0px;
}
.formItem>.name{
    text-align: right;
    padding-right: 4px;
    width: 36%;
}
.formItem>.name>i{
    color: rgb(18, 150, 219);
}


/* 50%宽度 */
.formItem_0_5{
    width:50%;
}
.formItem_0_5>.name{
    width:60%;
}
.formItem_0_5>.value{
    width:30%;
}


.bottomOperation{
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: 20px;
}
.bottomOperation>button{
   width:120px;
}



/* 文件上传Loading */
.fileUploadLoading{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.12941176470588237);
    z-index: 10000;
    /* display: flex; */
    display: none;
    align-items: center;
    justify-content: center;
}
.fileUploadLoading>.content{
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    padding: 30px 40px;
    border-radius: 6px;
    font-size: 16px;
}
.fileUploadLoading>.content>i{
    font-size: 20px;
    margin-right: 8px;
}

</style>